<template>
  <div class="section">
    <div class="container" v-reveal>
      <el-page-header content="关于" />

      <div class="mt">
        <p>剧情简介</p>
        <span>浪浪山的野生小猪妖一心想进大王洞，却因为一次意外得罪了大王，无奈之下被迫离开浪浪山。而后，小猪妖与同为无名小妖的蛤蟆精、黄鼠狼精和猩猩怪组成了草根仿冒取经团队，开始了误打误撞且荒诞离奇的冒险旅程。当假的取经队伍遇上假西天，在身份错位的交锋与相互揭穿后，小妖怪们不得面对真实的自己。</span>
      </div>
      <div class="mt">
        <p>角色介绍</p>
        <div class="role-list">
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="6" v-for="(role, index) in roles" :key="index">
              <el-card
                class="role-card"
                shadow="hover"
                :body-style="{ padding: '16px' }"
              >
                <div class="role-image-container">
                  <img
                    :src="role.img"
                    :alt="role.name"
                    class="role-image"
                  />
                </div>
                <div class="role-info">
                  <h3 class="role-name">{{ role.name }}</h3>
                  <p class="role-desc">{{ role.desc }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const roles = [
  {
    name: '小猪妖',
    img: new URL('../assets/images/2.jpg', import.meta.url).href,
    desc: '胆子大点子多的“创始人”。他原本是离家在浪浪山闯荡却屡屡受挫的无名小妖，后作为领头人集结三个小伙伴出山，西行取经。取经装备是耙子。'
  },
  {
    name: '蛤蟆精',
    img: new URL('../assets/images/3.jpg', import.meta.url).href,
    desc: '爱抱怨但很能干的“总助”。他是小猪妖的发小，也是大王洞的底层刷锅匠。在因为意外而丢掉工作后，他第一个加入了西行队伍。取经装备是袈裟。'
  },
  {
    name: '黄鼠狼精',
    img: new URL('../assets/images/4.jpg', import.meta.url).href,
    desc: '活跟话一样多的“后勤主管”。他原本是浪浪山里神出鬼没的黄大仙，后被小猪妖“忽悠”加入西行小队。取经装备是磨刀石。'
  },
  {
    name: '猩猩怪',
    img: new URL('../assets/images/5.jpg', import.meta.url).href,
    desc: '胆小社恐但天赋异禀的“保安队长”。他是个极度社恐、超级i人，被小猪妖强行请出山，加入西行取经队伍。取经装备是豹纹裙。'
  }
]

</script>

<style scoped>
.mt {
  margin-top: 16px
}

.role-list {
  margin-top: 16px;
}

.role-card {
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.role-card:hover {
  transform: translateY(-5px);
}

.role-image-container {
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
}

.role-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.role-card:hover .role-image {
  transform: scale(1.05);
}

.role-info {
  flex-grow: 1;
}

.role-name {
  font-size: 18px;
  font-weight: 700;
  color: #a64b10;
  margin: 0 0 8px;
}

.role-desc {
  font-size: 14px;
  color: #7a5b4b;
  line-height: 1.6;
  margin: 0;
}
</style>